<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" label-position="right" :label-width="90" inline ref="formInline">
                    <FormItem label="停车库">
                        <div class="filters-input">
                            <el-select v-model="filters.parkingId" placeholder="请选停车库" filterable clearable
                                       no-data-text="暂无数据">
                                <el-option v-for="item in parkingList" :value="item.id" :key="item.id"
                                           :label="item.parkingName"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="商家名称">
                        <div class="filters-input">
                            <Input v-model="filters.shopId" placeholder="商家名称" clearable/>
                        </div>
                    </FormItem>
                    <FormItem label="卡券名称">
                        <div class="filters-input">
                            <Input v-model="filters.shopId" placeholder="卡券名称" clearable/>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery('formInline')">搜索</Button>
                    </FormItem>
                </Form>
            </Row>
            <Row class="form-row">
                <Button type="primary" icon="md-add" @click="modalEdit = true;modalType = 'add';Coupon = {}">新增
                </Button>
            </Row>
            <el-table stripe border :loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="parkingId" label="停车场">
                    <template slot-scope="scope">
                        {{parkingNameList[scope.row.parkingId]}}
                    </template>
                </el-table-column>
                <el-table-column prop="shopName" label="商家"></el-table-column>
                <el-table-column prop="couponName" label="优惠券名称"></el-table-column>
                <el-table-column prop="couponMode" label="优惠券模式" :formatter="formatterMode"></el-table-column>
                <el-table-column prop="couponNum" label="金额/分钟"></el-table-column>
                <el-table-column prop="couponMsg" label="卡券说明"></el-table-column>
                <el-table-column prop="startTime" label="优惠券有效开始时间"></el-table-column>
                <el-table-column prop="endTime" label="有效结束时间"></el-table-column>
                <el-table-column prop="quantity" label="优惠券发放数量"></el-table-column>
                <el-table-column prop="issue" label="领取数量"></el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == '0'">正常</span>
                        <span v-else>作废</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="HandleVoid( scope.row )">作废</el-button>
                        <el-button size="mini" type="warning" @click="HandleCode( scope.row )">二维码</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  id="lyPage"
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>

        </Card>


        <Modal v-model="modalEdit" :title="modalType == 'add' ? '新增': '修改'" width="800">
            <Form ref="saveCoupon" :model="Coupon" :rules="CouponRules" :label-width="110">
                <FormItem label="停车库" prop="parkingId">
                    <el-select v-model="Coupon.parkingId" placeholder="请选停车库" filterable clearable
                               style="width:100%" no-data-text="暂无数据" @change="changeParking">
                        <el-option v-for="item in parkingList" :value="item.id" :key="item.id"
                                   :label="item.parkingName"></el-option>
                    </el-select>
                </FormItem>
                <FormItem label="商家名称" prop="shopId">
                    <el-select v-model="Coupon.shopId" placeholder="商场名称" filterable clearable
                               style="width:100%" no-data-text="暂无数据">
                        <el-option v-for="item in shopList" :value="item.id" :key="item.id"
                                   :label="item.shopName"></el-option>
                    </el-select>
                </FormItem>

                <FormItem label="优惠券名称" prop="couponName">
                    <Input v-model="Coupon.couponName" clearable placeholder="优惠券名称" class="normal-input"></Input>
                </FormItem>

                <FormItem label="优惠券模式" prop="couponMode">
                    <el-select v-model="Coupon.couponMode" placeholder="优惠券模式" filterable clearable
                               style="width:100%">
                        <el-option value="1" label="按百分比计算"></el-option>
                        <el-option value="2" label="直接减去金额(单位:元)"></el-option>
                        <el-option value="3" label="减免停车时间(单位:分钟)"></el-option>
                        <el-option value="4" label="免费券"></el-option>
                    </el-select>
                </FormItem>

                <FormItem label="金额或分钟" prop="couponNum">
                    <Input v-model="Coupon.couponNum" clearable placeholder="金额或分钟" class="normal-input"></Input>
                </FormItem>

                <FormItem label="说明" prop="couponMsg">
                    <Input v-model="Coupon.couponMsg" clearable placeholder="说明" class="normal-input"></Input>
                </FormItem>

                <FormItem label="有效期开始时间" prop="startTime">
                    <DatePicker v-model="Coupon.startTime" clearable type="datetime" placeholder="有效期开始时间"
                                style="width: 100%;" @on-change="fyStartTime" format="yyyy-MM-dd HH:mm:ss"></DatePicker>
                </FormItem>

                <FormItem label="有效期结束时间" prop="endTime">
                    <DatePicker v-model="Coupon.endTime" clearable type="datetime" placeholder="有效期结束时间"
                                style="width: 100%;" @on-change="fyEndTime" format="yyyy-MM-dd HH:mm:ss"></DatePicker>
                </FormItem>

                <FormItem label="发券数量" prop="quantity">
                    <Input v-model="Coupon.quantity" clearable placeholder="发券数量" class="normal-input"></Input>
                </FormItem>

            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="onCancel()">关闭</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="tableLoading">确定</Button>
            </div>
        </Modal>


        <Modal v-model="modalCode" title="二维码" width="450">
            <row>
                <img :src="codeImg" alt="">
            </row>
        </Modal>

    </div>
</template>


<script>
    //线上下载模板地址
    import baseURL from "_conf/url";
    import Treeselect from "@riophae/vue-treeselect";
    import Cookies from "js-cookie";
    import {TOKEN_KEY} from "@/libs/util";
    import moment from "moment"
    //线上上传账单地址
    const act = baseURL + "/api/bill/upload";

    export default {
        data() {
            return {
                //查询条件
                filters: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //车库列表
                parkingList: [],
                parkingNameList: {},
                status: [],
                costType: [],
                tableData: [],
                //表单提交状态
                modal: {},
                tableLoading: false,
                modalEdit: false,
                modalType: 'add',
                Coupon: {},
                CouponRules: {
                    parkingId: [
                        {required: true, message: "请选择停车库"}
                    ],
                    shopType: [
                        {required: true, message: "请选择门店类型"}
                    ],
                    shopId: [
                        {required: true, message: "请选择商家名称"}
                    ],
                    couponName: [
                        {required: true, message: "请输入优惠券名称"}
                    ],
                    couponMode: [
                        {required: true, message: "请选择优惠券模式"}
                    ],
                    couponNum: [
                        {required: true, message: "请输入金额或分钟数"}
                    ],
                    couponMsg: [
                        {required: true, message: "请输入说明"}
                    ],
                    startTime: [
                        {required: true, message: "请选择有效期开始时间"}
                    ],
                    endTime: [
                        {required: true, message: "请选择有效期结束时间"}
                    ],
                    quantity: [
                        {required: true, message: "请输入发券量"}
                    ],


                },
                //商家列表
                shopList: [],
                modalCode: false,
                codeImg: "",
            }
        },
        created: function () {
            this.getParking();
            this.loadData();
        },
        methods: {
            //加载数据
            loadData: function () {
                if (this.tableLoading) return;
                this.tableLoading = true;
                let params = this.filters;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;

                // console.log(params)

                //与后台交换数据
                this.postRequest("/api/parking/shop/coupon/list", params).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            getCostType: function (value) {
                this.getRequest(
                    "/api/costType/getCostTypeByhousingId?housingId=" + value
                ).then(res => {
                    if (res.code == 20000) {
                        this.costType = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            getParking: function () {
                this.getRequest("/api/parking/all").then(res => {
                    this.parkingList = res.data;
                    const parkingNameList = {};
                    res.data.forEach(function (c) {
                        parkingNameList[c.id] = c.parkingName;
                    })
                    this.parkingNameList = parkingNameList
                });
            },

            //查询
            handleQuery(name) {
                this.loadData();
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            onCancel: function () {
                this.modalEdit = false;
            },
            //优惠券模式 1按百分比计算 2直接减去金额(单位:元) 3减免停车时间(单位:分钟) 4 免费券
            formatterMode(row, column) {
                if (row.couponMode == '1') {
                    return "按百分比计算";
                } else if (row.couponMode == '2') {
                    return "直接减去金额(单位:元)";
                } else if (row.couponMode == '3') {
                    return "减免停车时间(单位:分钟)";
                } else if (row.couponMode == '4') {
                    return "免费券)";
                } else {
                    return "--"
                }
            },
            //    编辑按钮
            // HandleEdit: function (row) {
            //     this.modalEdit = true
            //     this.modalType = 'edit'
            //     this.Coupon = row;
            // },
            //作废按钮
            HandleVoid: function (row) {
                row.status = -1;
                this.postRequest('/api/parking/shop/coupon/save', row).then(res => {
                    this.tableLoading = false
                    if (res.code == 20000) {
                        this.$Message.success("操作成功！")
                        this.modalEdit = false
                        this.loadData()
                        return
                    }
                    this.$Message.error(res.message)

                })
            },
            //确认按钮
            handleSubmit: function () {
                this.$refs['saveCoupon'].validate(valid => {
                    if (valid) {
                        const url = "/api/parking/shop/coupon/save";
                        console.log(this.Coupon);
                        this.postRequest(url, this.Coupon).then(res => {
                            this.tableLoading = false
                            if (res.code == 20000) {
                                this.$Message.success("操作成功！")
                                this.modalEdit = false
                                this.loadData()
                                return
                            }
                            this.$Message.error(res.message)

                        })

                    }
                })
            },
            //选择停车场
            changeParking(value) {
                if (value) {
                    this.getRequest("/api/parking/shop/list/" + value).then(res => {
                        console.log(res);
                        this.shopList = res.data;
                    });

                }
            },
            //    开始时间
            fyStartTime(startTime) {
                this.Coupon.startTime = startTime;
            },
            //    结束时间
            fyEndTime(endTime) {
                this.Coupon.endTime = endTime;
            },
            // 生成二维码
            HandleCode: function (row) {
                // /api/parking/shop/coupon/qrcode/1
                this.codeImg = baseURL + "/api/parking/shop/coupon/qrcode/" + row.id;

                this.modalCode = true;

            }

        }
    }
    ;
</script>
